<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="applicable-device" content="mobile">
	<title>产品详情页</title>
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/product.css">
	<link rel="stylesheet" href="css/swiper.min.css">
  	<script type="text/javascript" src="js/zepto.min.js"></script>
  	<script type="text/javascript" src="js/swiper.jquery.min.js"></script>
  	<script type="text/javascript" src="js/anim.js"></script>
  	<script type="text/javascript" src="js/touch.js"></script>
</head>
<body>
	<div class="container">
		<!-- 产品详情页搜索框开始 -->
		<div class="search">
			<a href="index.html">
				<i class="fa fa-angle-left"></i>
			</a>

			<input type="text" placeholder="请输入关键字" name="keyword">
			<i class="fa fa-search"></i>
			<a href="#" class="share">
				<i class="fa fa-share-alt"></i>
				<span>分享</span>
			</a>

		</div>
		<!-- 产品详情页搜索框结束 -->

		<!-- 首页banner开始 -->
		<div class="swiper-container">
		      <div class="swiper-wrapper">
		        <div class="swiper-slide"><img src="img/product.png" alt=""></div>
		        <div class="swiper-slide"><img src="img/product.png" alt=""></div>
		        <div class="swiper-slide"><img src="img/product.png" alt=""></div>
		      </div>
		      <div class="swiper-scrollbar"></div>
      			<!-- <div class="swiper-pagination"></div> -->
    	</div>
    	<!-- 首页banner结束 -->

		<!-- 产品标题开始 -->
    	<div class="product_title">
    		标题文字区域 标题文字区域 标题文字区域 描述文字区域分
			段显示最多两行文字显示 两行文字显示
    	</div>
    	<!-- 产品标题结束 -->

		<!-- 购买价格介绍开始 -->
    	<div class="product_num">
    		<div class="product_num_per">
    			<span class="up">
    				起批量>=10
    			</span>
    			<span class="down">
    				￥<strong>1.95</strong>/个
    			</span>
    		</div>
    		<div class="product_num_per">
    			<span class="up">
    				起批量>=50
    			</span>
    			<span class="down">
    				￥<strong>1.90</strong>/个
    			</span>
    		</div>
    		<div class="product_num_per">
    			<span class="up">
    				起批量>=500
    			</span>
    			<span class="down">
    				￥<strong>1.85</strong>/个
    			</span>
    		</div>
    	</div>
    	<!-- 购买价格介绍结束 -->

    	<div class="product_down">
    		<div class="product_down_main cl">
	    		<!-- 商铺标题开始 -->
		    	<div class="header">
					<div class="logo" style="background-image:url(img/logo.png); background-size: cover;">

					</div>
					<div class="hd_middler">
						<h1>商铺名称标题</h1>
						<div class="biao" style="background:url(img/biao.png) no-repeat;background-size:cover;"></div>
					</div>
					<a href="#"><i class="fa fa-angle-right"></i></a>
				</div>
				<!-- 商铺标题结束 -->

				<div class="pro_main_down cl">
					<a href="goods.html" class="all">
					<i></i>
						全部商品
					</a>
					<a href="tel:139223222333" class="line">
					<i></i>
						联系商家
					</a>
				</div>

			</div>

    	</div>

    	<div class="uppull">
    		<i></i>
    		上拉查看图文详情
    	</div>
		<div class="product_list">
			<img src="img/product.png" alt="">
			<img src="img/product.png" alt="">
			<img src="img/product.png" alt="">
		</div>


		<div class="tabbar">
			<div class="tabbar-item">
				<a href="index.html" class="in">
					<div class="tabbar_icon">
						
					</div>
					<p class="tabbar_label">店铺首页</p>
				</a>
				<a href="goods.html" class="in">
					<div class="tabbar_icon">
						
					</div>
					<p class="tabbar_label">全部商品</p>
				</a>
			</div>
			<a href="#" class="tabbar-item add">
				加入购物车
			</a>
			<a href="#" class="tabbar-item buy">
				购买商品
			</a>
			
		</div>



		<div class="app_transition">
			<div class="layer"></div>
			<div class="buy_con">
				<div class="buy_up">
					<div class="proimg" style="background:url(img/goods.png) no-repeat;background-size: contain;"></div>
					<div class="buymain">
						<h1>标题文字区域标题文字区域标题文字区域描述文字区域分段显示最多两行 描述文字区域分段显示最多两行</h1>
						<span class="down">￥<strong>1.95</strong>/个</span>
					</div>
					<i class="fa fa-close"></i>
				</div>
				<div class="buy_down">
					<h1>规格</h1>
					<form action="#" class="">
						<div class="amount">
							<label for="black">黑色</label>
							<div class="unit_amount">
								<a href="javascript:void(0);" class="amount_down fa fa-minus"></a>
								<input type="text" id="black" name="" value="11" class="amount_input">
								<a href="javascript:void(0);" class="amount_up fa fa-plus"></a>
							</div>
						</div>
						<div class="amount">
							<label for="red">红色花纹</label>
							<div class="unit_amount">
								<a href="javascript:void(0);" class="amount_down fa fa-minus"></a>
								<input type="text" name="" id="red" value="11" class="amount_input">
								<a href="javascript:void(0);" class="amount_up fa fa-plus"></a>
							</div>
						</div>
						<div class="amount">
							<label for="green">绿色</label>
							<div class="unit_amount">
								<a href="javascript:void(0);" class="amount_down fa fa-minus"></a>
								<input type="text" name="" id="green" value="11" class="amount_input">
								<a href="javascript:void(0);" class="amount_up fa fa-plus"></a>
							</div>
						</div>
						
							<input type="submit" value="确定" class="buy_bottom">
						
					</form>					
				</div>
				
			</div>
		</div>
	</div>

	<script type="text/javascript">
		$(function(){
			var mySwiper = new Swiper(".swiper-container",{
		      initialSlide:3,
		      speed:2000,
		      loop:true,
		      autoplay:1000,
		      autoplayDisableOnInteraction:false,
		      scrollbar:'.swiper-scrollbar'
		    });


		    $(".search input").click(function(){
	    			window.location.href="search.html";
	    	});


		    $(".add,.buy").click(function(){
				$(".app_transition").show();
	    		$(".app_transition").animate({opacity:1},800);
		    });

		    $(".fa-close").click(function(){
	    		$(".app_transition").animate({opacity:0},800);
	    		$(".app_transition").hide();
		    });

		    $(".amount_down").click(function(){

		    	var $input = $(this).parent().find("input");
		    	if($input.val()>0){
		    		$input.val(parseInt($input.val())-1);
		    	}
		    });

		    $(".amount_up").click(function(){

		    	var $input = $(this).parent().find("input");
		    	$input.val(parseInt($input.val())+1);

		    });


		    $(".uppull").swipeUp(function(){
		    	$(".product_list").show();
		    	$(".uppull").css({"margin-bottom":"0px"});
		    	$(this).html("<i></i>点击隐藏详情图文");
		    });

		    $(".uppull").click(function(){
		    	if($(".product_list").css("display")=="block"){
		    		$(".product_list").hide();
		    		$(this).html("<i></i>上拉查看详情图文");
		    	}
		    });
	    	
		});
	</script>
</body>
</html>